<template>
  <div class="container" ref="mainCon">
    <topTitle :titleText="titleText" :titleExplain="titleExplain"></topTitle>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form
          :inline="true"
          :model="filterField"
          ref="formData"
          :rules="rules"
        >
          <el-col :lg="8" :xl="6">
            <el-form-item label="项目名称" class="row-padding-bottom">
              <el-input
                v-model="filterField.projectName"
                placeholder="请输入项目名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="区域" class="row-padding-bottom">
              <el-cascader
                ref="manageArea"
                v-model="areaId"
                :options="areasOptions"
                @change="getAreaId"
                clearable
                filterable
                :props="{ checkStrictly: true }"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="行业" class="row-padding-bottom">
                <el-select
                  v-model="filterField.industryId"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in industryOptions"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item
                label="工程造价"
                class="projectPrice"
                prop="randowPrice"
              >
                <el-input
                  v-model="filterField.totalMin"
                  placeholder="请输入"
                  style="width: 100px"
                ></el-input>
                <span>至</span>
                <el-input
                  v-model="filterField.totalMax"
                  placeholder="请输入"
                  style="width: 100px"
                ></el-input>
                <span>元</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="状态" class="row-padding-bottom">
                <el-select
                  v-model="filterField.status"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="投资类型" class="row-padding-bottom">
                <el-select
                  v-model="filterField.investment"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in investmentOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="开设专户" class="row-padding-bottom">
                <el-select
                  v-model="filterField.isSa"
                  placeholder="请选择"
                  clearable
                >
                  <el-option label="是" value="1"></el-option>
                  <el-option label="否" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item
                label="总人数"
                class="personNum"
                prop="totalPersonNum"
              >
                <el-input
                  v-model="filterField.realNameTotalMin"
                  placeholder="请输入"
                  style="width: 100px"
                ></el-input>
                <span>至</span>
                <el-input
                  v-model="filterField.realNameTotalMax"
                  placeholder="请输入"
                  style="width: 100px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item
                label="总考勤人次"
                class="personNum"
                prop="totalAtt"
              >
                <el-input
                  v-model="filterField.attTotalMin"
                  placeholder="请输入"
                  style="width: 100px"
                ></el-input>
                <span>至</span>
                <el-input
                  v-model="filterField.attTotalMax"
                  placeholder="请输入"
                  style="width: 100px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item
                label="专户总缴存"
                class="projectPrice"
                prop="totalAcc"
              >
                <el-input
                  v-model="filterField.salaryTotalInMin"
                  placeholder="请输入"
                  style="width: 100px"
                ></el-input>
                <span>至</span>
                <el-input
                  v-model="filterField.salaryTotalInMax"
                  placeholder="请输入"
                  style="width: 100px"
                ></el-input>
                <span>元</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item
                label="代发总金额"
                class="projectPrice"
                prop="totalIssuing"
              >
                <el-input
                  v-model="filterField.saTotalMin"
                  placeholder="请输入"
                  style="width: 100px"
                ></el-input>
                <span>至</span>
                <el-input
                  v-model="filterField.saTotalMax"
                  placeholder="请输入"
                  style="width: 100px"
                ></el-input>
                <span>元</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="建设方" class="row-padding-bottom">
                <el-input
                  v-model="filterField.pcName"
                  placeholder="请输入建设方名称"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="施工方" class="row-padding-bottom">
                <el-input
                  v-model="filterField.pbName"
                  placeholder="请输入施工方名称"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <div class="clear">
              <span class="labelTitleSty">标签</span>
              <div style="margin-left: 85px">
                <el-checkbox-group
                  v-model="filterField.tagTypes"
                  @change="getCheckedLables"
                  class="fl"
                  style="
                    line-height: 36px;
                    margin-right: 12px;
                    margin-bottom: 24px;
                  "
                >
                  <el-checkbox
                    v-for="item in labelArr"
                    :key="item.tagName"
                    :label="item.tagId"
                    >{{ item.tagName + '(' + item.count + ')' }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
            </div>
          </template>
          <el-col :lg="8" :xl="6">
            <el-form-item label="">
              <a
                @click="toggleAdvanced"
                style="margin-left: 40px; color: #409eff; cursor: pointer"
                class="btnColor"
              >
                {{ advanced ? '收起' : '展开' }}
                <i
                  :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </a>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <!-- <div class="header">
                <span>查询列表</span>
                <div class="headerBtn">
                    <el-button type="primary" class="funComBut saveBtn" @click="singleEditLabel('','add')">
                        批量添加标签
                    </el-button>
                    <el-button type="primary" class="funComBut saveBtn" @click="singleEditLabel('','cancel')">
                        批量取消标签
                    </el-button>
                    <el-button type="primary" class="funComBut saveBtn" icon="icon iconfont icondaochu" @click="toExportExcel('1')">
                        导出
                    </el-button>
                </div>
            </div> -->
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <div style="margin-bottom: 24px">
          <el-button
            type="primary"
            class="funComBut saveBtn"
            @click="singleEditLabel('', 'add')"
          >
            批量添加标签
          </el-button>
          <el-button
            type="primary"
            class="funComBut saveBtn"
            @click="singleEditLabel('', 'cancel')"
          >
            批量取消标签
          </el-button>
          <el-button
            type="primary"
            class="funComBut saveBtn"
            icon="icon iconfont icondaochu"
            @click="toExportExcel('1')"
          >
            导出
          </el-button>
        </div>
        <el-table
          ref="tableBox1"
          :data="tableList"
          v-loading="loading"
          @sort-change="sortChange"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
          :row-key="recordId"
          @select-all="selectAll"
          @select="selectionChange"
          :header-cell-class-name="cellClass"
          :max-height="tableHeight"
        >
          <el-table-column
            type="selection"
            align="center"
            width="60"
            :reserve-selection="true"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column prop="projectName" label="项目名称" width="230px">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="areaDetailDesc"
            label="区域"
            align="center"
            :formatter="formatTd"
            width="230px"
          ></el-table-column>
          <el-table-column
            prop="industryName"
            label="行业"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="pcName"
            label="建设方"
            align="left"
            :formatter="formatTd"
            width="230px"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.pcName"
                :columnName="'pcName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="pbName"
            label="施工方"
            align="left"
            :formatter="formatTd"
            width="230px"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.pbName"
                :columnName="'pbName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="total"
            label="工程造价（元）"
            sortable="custom"
            align="center"
            :formatter="formatTd"
            width="200px"
          ></el-table-column>
          <el-table-column
            prop="statusDesc"
            label="状态"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="investmentDesc"
            label="投资类型"
            align="center"
            :formatter="formatTd"
            width="120px"
          ></el-table-column>
          <el-table-column
            prop="attTotal"
            label="总考勤人次"
            sortable="custom"
            align="center"
            :formatter="formatTd"
            width="140px"
          ></el-table-column>
          <el-table-column
            prop="salaryTotalIn"
            label="专户总缴存（元）"
            sortable="custom"
            align="center"
            :formatter="formatTd"
            width="200px"
          ></el-table-column>
          <el-table-column
            prop="saTotal"
            label="代发总金额（元）"
            sortable="custom"
            align="center"
            :formatter="formatTd"
            width="200px"
          ></el-table-column>
          <el-table-column
            prop="count"
            label="标签"
            align="center"
            :formatter="formatTd"
            width="200px"
          >
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                :content="scope.row.tagNames.join(',')"
                placement="top"
                v-if="scope.row.count"
              >
                <span>{{ scope.row.count }}</span>
              </el-tooltip>
              <span v-else>{{ '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="left"
            fixed="right"
            width="190px"
          >
            <template slot-scope="scope">
              <el-link
                type="primary"
                @click="singleEditLabel(scope.row, 'single')"
                >编辑标签</el-link
              >
              <el-link type="primary" @click="toDetail(scope.$index, scope.row)"
                >查看详情</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
      </div>
      <Pagination
        ref="pagination"
        @getList="getTableList"
        :filterField="filterField"
        :requestUrl="requestUrl"
      ></Pagination>
    </div>
    <el-dialog
      :title="titleCon"
      :visible.sync="dialogVisible"
      @close="cancelForm"
      :modal-append-to-body="false"
      close-on-click-modal="false"
      width="900px"
    >
      <el-form :model="formData" :rules="formRules" ref="formDataDia">
        <!-- <div>
                <span v-if = "titleType == 'single'">项目名称：<span>非建的减肥了放假了</span></span>
                <span v-else>已选择项目：<span>{{proNum}}</span>个</span>
            </div> -->
        <el-form-item
          label="项目名称:"
          class="row-padding-bottom"
          label-width="90px"
          v-if="titleType == 'single'"
        >
          <span class="wordStyle">{{ diaProjectName }}</span>
        </el-form-item>
        <el-form-item
          label="已选择项目:"
          class="row-padding-bottom selectedBox"
          label-width="90px"
          v-else
        >
          <span class="wordStyle">{{ proNum }}</span
          >个
          <el-button
            type="primary"
            class="funComBut"
            icon="icon iconfont icondaochu"
            @click="toExportExcel('2')"
            style="color: #409eff; background-color: #fff; border-color: #fff"
          >
            导出
          </el-button>
        </el-form-item>

        <el-form-item
          label="标签:"
          class="row-padding-bottom"
          label-width="90px"
          prop="labelProp"
        >
          <div class="labelBox">
            <ul class="clearfix">
              <li
                v-for="(item, i) in selectLabel"
                :key="i"
                class="fl selectSty"
              >
                <el-tag
                  size="mini"
                  closable
                  :disable-transitions="true"
                  @close="handleClose(item)"
                  >{{ item.name }}</el-tag
                >
              </li>
            </ul>
          </div>
          <span
            v-if="isTip"
            style="
              font-size: 12px;
              color: red;
              display: block;
              line-height: 22px;
            "
            >标签不能为空</span
          >
        </el-form-item>
        <el-form-item
          label="可选标签:"
          class="row-padding-bottom"
          label-width="90px"
        >
          <div class="optionalLabelBox">
            <ul class="clearfix">
              <li
                v-for="(item, i) in optionalLabel"
                :key="i"
                class="fl"
                @click="choiceLabel(item)"
              >
                <span class="selectColor">+ </span>{{ item.name }}
              </li>
            </ul>
          </div>
        </el-form-item>
        <el-form-item
          label="说明:"
          class="row-padding-bottom"
          label-width="90px"
        >
          <div class="explain">
            <ul class="clearfix">
              <li>
                1.【不参与项目评价】：选择此标签则会隐藏项目所有评分记录，且不再产生新的评分，项目评价列表不展示该项目;
              </li>
              <li>
                2.【不参与企业评价】：该项目不参与建筑领域企业评价，不作为企业评价关联项目;
              </li>
              <li>
                3.【不预警】：选择此标签则会隐藏项目所有预警记录，且不再产生新的预警;
              </li>
              <li>
                4.【不展示且不统计】：选择此标签则会在监管端各列表页面均不展示该项目相关数据，以适应检查；且涉及到监管端的统计指标的页面均不统计；<span
                  style="color: red"
                  >项目数据保留不删除，
                  项目用户以及企业用户对应功能不影响，仍可正常查看及管理该项目</span
                >
              </li>
              <li>
                5.【需上传到住建等平台】：只有打上此标签的项目，才会上传到住建等平台;（目前仅适用：恩施、襄阳、孝感、鄂州、松滋、黄石、十堰、随州、滁州向住建平台推送项目）
              </li>
            </ul>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="cancelForm" class="cancel">取消</el-button>
        <el-button
          type="primary"
          @click.native="saveBankInfo"
          class="save"
          :loading="canLogin"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import common from '../../kits/common'
import { mapState, mapActions } from 'vuex'
import scrollTable from '@/mixin/scrollTable.js'

export default {
  name: 'labelManagementList',
  mixins: [scrollTable],
  data() {
    var checkPerson = (rule, value, callback) => {
      var start, End, tipOne, tipTwo
      if (rule.field == 'totalPersonNum') {
        start = this.filterField.realNameTotalMin
        End = this.filterField.realNameTotalMax
        tipOne = '总人数区间必须为大于等于0的整数'
      } else if (rule.field == 'totalAtt') {
        start = this.filterField.attTotalMin
        End = this.filterField.attTotalMax
        tipOne = '总考勤人次区间必须为大于等于0的整数'
      }
      tipTwo = '后面的区间必须大于前面的区间'
      if (start || End) {
        const reg = /^[\+]?(([1-9]\d*)|\d)$/
        if ((start && !reg.test(start)) || (End && !reg.test(End))) {
          callback(new Error(tipOne))
        } else {
          if (start && End) {
            if (start * 1 >= End * 1) {
              callback(new Error(tipTwo))
            } else {
              callback()
            }
          } else {
            callback()
          }
        }
      } else {
        callback()
      }
    }
    var checkPrice = (rule, value, callback) => {
      var start, End, tipOne, tipTwo
      if (rule.field == 'randowPrice') {
        start = this.filterField.totalMin
        End = this.filterField.totalMax
        tipOne = '工程造价区间支持整数或两位小数'
      } else if (rule.field == 'totalIssuing') {
        start = this.filterField.saTotalMin
        End = this.filterField.saTotalMax
        tipOne = '代发总金额区间支持整数或两位小数'
      } else if (rule.field == 'totalAcc') {
        start = this.filterField.salaryTotalInMin
        End = this.filterField.salaryTotalInMax
        tipOne = '专户总缴存区间支持整数或两位小数'
      }
      tipTwo = '后面的区间必须大于前面的区间'
      if (start || End) {
        const reg = /^(([1-9]\d*)(\.\d{1,2})?|0\.([1-9]|\d[1-9])|0)$/
        if ((start && !reg.test(start)) || (End && !reg.test(End))) {
          callback(new Error(tipOne))
        } else {
          if (start && End) {
            if (start * 1 >= End * 1) {
              callback(new Error(tipTwo))
            } else {
              callback()
            }
          } else {
            callback()
          }
        }
      } else {
        callback()
      }
    }
    return {
      titleText: '项目标签化管理',
      titleExplain:
        '展示管辖范围内所有监管部门建档和企业申报并通过审核的项目清单，可以按需隐藏，不统计.不预警等',
      //表格数据
      tableList: [],
      requestUrl: 'api-p/projectTag/handler/list',
      areaId: '', //区域
      //搜索条件
      filterField: {
        projectName: '', //项目名称
        areaId: '', //区域
        status: 'STARTED', //开工状态  ；默认只显示已开工状态的项目2020/10/19 恩施
        industryId: '', //行业
        investment: '', //投资类型
        isSa: '', //是否开设专户
        pcName: '', //建设方
        pbName: '', //施工方
        serverArea: '', // 服务部署区域
        totalMin: '',
        totalMax: '',
        realNameTotalMin: '',
        realNameTotalMax: '',
        attTotalMin: '',
        attTotalMax: '',
        salaryTotalInMin: '',
        salaryTotalInMax: '',
        saTotalMin: '',
        saTotalMax: '',
        tagTypes: [],
      },
      isShow: false, //列表加载
      loading: true,
      rules: {
        totalPersonNum: [{ validator: checkPerson, trigger: 'blur' }],
        totalAtt: [{ validator: checkPerson, trigger: 'blur' }],
        randowPrice: [{ validator: checkPrice, trigger: 'blur' }],
        totalIssuing: [{ validator: checkPrice, trigger: 'blur' }],
        totalAcc: [{ validator: checkPrice, trigger: 'blur' }],
      },
      labelArr: [],
      labelIds: [],
      checkedArr: [],
      titleCon: '',
      titleType: '',
      dialogVisible: false,
      proNum: '',
      diaProjectName: '',
      formRules: {
        labelProp: [{ required: true }],
      },
      isTip: false,
      optionalLabel: [],
      selectLabel: [],
      projectId: '',
      projectIds: [],
      canLogin: false,
      flag: false,
      advanced: false,
    }
  },
  watch: {
    selectLabel(newVal, oldVal) {
      if (this.titleType != 'single') {
        if (this.flag) {
          this.isTip = false
        } else {
          if (newVal.length > 0) {
            this.isTip = false
          } else {
            this.isTip = true
          }
        }
      }
    },
  },
  computed: {
    ...mapState([
      'investmentOptions',
      'statusOptions',
      'areasOptions',
      'industryOptions',
    ]),
  },
  created() {
    this.getLabelNum()

    this.getInvestmenttype({})
    this.getStatus({})
    this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
    this.getIndustry({})

    this.filterField.serverArea = this.$store.state.areaInfoArr.areaId
  },
  methods: {
    ...mapActions([
      'getInvestmenttype',
      'getStatus',
      'getAreas',
      'getIndustry',
    ]),
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    // getCheckedLables() {
    //     this.labelIds = this.filterField.tagTypes;
    // },
    //获取选中的区域最后一级id
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
      this.filterField.areaId = areaId
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    // 搜索
    searchList() {
      this.$refs.formData.validate((flag) => {
        if (flag) {
          this.$refs.pagination.getTableListData()
        }
      })
    },
    //跳转详情
    toDetail(index, row) {
      this.$router.push({
        path: '/home/monitorProjectManagement/projectDetail',
        name: 'projectDetail',
        query: {
          projectId: row.projectId,
          mark: 'label',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/labelManagement/labelManagementList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    // 列表多选
    recordId(row) {
      return row.projectId
    },
    selectionChange(rows, row) {
      var selected = rows.length && rows.indexOf(row) !== -1
      if (selected) {
        this.checkedArr = rows
      } else {
        this.checkedArr.forEach((item, i) => {
          if (item.projectId == row.projectId) {
            this.checkedArr.splice(i, 1)
          }
        })
      }
      this.proNum = this.checkedArr.length
    },
    selectAll(selection) {
      this.proNum = selection.length
      this.checkedArr = selection
      if (selection) {
        selection.forEach((row) => {
          this.$refs.tableBox1.toggleRowSelection(row, true)
        })
      } else {
        this.$refs.tableBox1.clearSelection()
      }
    },
    cellClass(row) {
      if (row.columnIndex === 0) {
        return 'disabledCheck'
      }
    },
    singleEditLabel(row, type) {
      if (!row && this.checkedArr.length < 1) {
        this.$message({
          message: '请选择项目',
          type: 'warning',
        })
        return false
      }
      this.dialogVisible = true
      this.titleType = type
      this.isTip = false
      this.flag = true
      if (this.titleType == 'single') {
        this.titleCon = '编辑标签'
        this.getLabelDetail(row.projectId)
        this.projectId = row.projectId
      } else if (this.titleType == 'add') {
        this.titleCon = '批量添加标签'
        this.getLabel()
      } else {
        this.titleCon = '批量取消标签'
        this.getLabel()
      }
      this.projectIds = []
      if (this.titleType != 'single') {
        for (var i = 0; i < this.checkedArr.length; i++) {
          this.projectIds.push(this.checkedArr[i].projectId)
        }
      }
    },
    // 点击标签
    choiceLabel(item) {
      this.optionalLabel.remove(item)
      this.selectLabel.push(item)
    },
    handleClose(item) {
      this.flag = false
      this.selectLabel.splice(this.selectLabel.indexOf(item), 1)
      this.optionalLabel.push(item)
    },
    saveBankInfo() {
      this.canLogin = true
      if (this.titleType != 'single') {
        if (this.selectLabel.length < 1) {
          this.isTip = true
          this.canLogin = false
          return
        } else {
          this.isTip = false
        }
      }
      for (var i = 0; i < this.selectLabel.length; i++) {
        this.labelIds.push(this.selectLabel[i].code)
      }
      var url, pro
      if (this.titleType != 'single') {
        // for(var i = 0; i < this.checkedArr.length;i++) {
        //     this.projectIds.push(this.checkedArr[i].projectId)
        // }
        pro = {
          projectIds: JSON.stringify(this.projectIds),
          searchTagTypes: JSON.stringify(this.labelIds),
        }
        if (this.titleType == 'add') {
          url = 'api-p/projectTag/handler/addProjectTagsByProjectIds'
        } else {
          url = 'api-p/projectTag/handler/deleteTagsByProjectIds'
        }
      } else {
        pro = {
          projectId: this.projectId,
          searchTagTypes: JSON.stringify(this.labelIds),
        }
        url = 'api-p/projectTag/handler/editOrSaveProjectTagByProjectId'
      }

      this.axios({
        method: 'post',
        url: url,
        data: pro,
      })
        .then((resp) => {
          if (!resp.data.hasError) {
            this.$message({
              message: resp.data.result,
              type: 'success',
            })
            this.dialogVisible = false
            this.labelIds = []
            this.projectIds = []
            this.checkedArr = []
            this.$refs.tableBox1.clearSelection()
            this.canLogin = false
            this.getLabelNum()
            setTimeout(() => {
              this.selectLabel = []
            }, 500)
          }
        })
        .catch((resp) => {
          this.$message.error('保存失败')
          this.canLogin = false
        })
    },
    cancelForm() {
      this.dialogVisible = false
      this.$nextTick(function () {
        this.$refs.formDataDia.resetFields()
      })
      setTimeout(() => {
        this.selectLabel = []
      }, 500)
    },
    getLabelNum() {
      this.axios({
        method: 'get',
        url: 'api-p/projectTag/handler/countProjectTags',
      })
        .then((resp) => {
          if (!resp.data.hasError) {
            this.labelArr = resp.data.result
            // for(var i = 0; i < this.labelArr.length;i++) {
            //     this.filterField.tagTypes.push(this.labelArr[i].tagId)
            // }
            this.searchList()
          }
        })
        .catch((resp) => {
          this.$message.error('数据获取失败')
        })
    },
    // 导出
    toExportExcel(type) {
      const vm = this
      if (type == '1') {
        vm.projectIds = []
        for (var i = 0; i < vm.checkedArr.length; i++) {
          vm.projectIds.push(vm.checkedArr[i].projectId)
        }
        if (vm.tableList.length > 0) {
          window.location.href =
            common.commonApi +
            'api-p/projectTag/handler/listExport?serverArea=' +
            vm.filterField.serverArea +
            '&areaId=' +
            vm.filterField.areaId +
            '&industryId=' +
            vm.filterField.industryId +
            '&investment=' +
            vm.filterField.investment +
            '&status=' +
            vm.filterField.status +
            '&projectName=' +
            encodeURIComponent(vm.filterField.projectName) +
            '&isSa=' +
            vm.filterField.isSa +
            '&totalMin=' +
            vm.filterField.totalMin +
            '&totalMax=' +
            vm.filterField.totalMax +
            '&realNameTotalMin=' +
            vm.filterField.realNameTotalMin +
            '&realNameTotalMax=' +
            vm.filterField.realNameTotalMax +
            '&attTotalMin=' +
            vm.filterField.attTotalMin +
            '&attTotalMax=' +
            vm.filterField.attTotalMax +
            '&salaryTotalInMin=' +
            vm.filterField.salaryTotalInMin +
            '&salaryTotalInMax=' +
            vm.filterField.salaryTotalInMax +
            '&saTotalMin=' +
            vm.filterField.saTotalMin +
            '&saTotalMax=' +
            vm.filterField.saTotalMax +
            '&pcName=' +
            vm.filterField.pcName +
            '&pbName=' +
            vm.filterField.pbName +
            '&searchTagTypes=' +
            vm.filterField.tagTypes +
            '&projectIds=' +
            vm.projectIds +
            '&sortField=' +
            vm.filterField.sortField +
            '&sort=' +
            vm.filterField.sort +
            '&access_token=' +
            localStorage.getItem('access_token')
        } else {
          this.$message({
            type: 'error',
            message: '无数据导出',
          })
        }
      } else {
        window.location.href =
          common.commonApi +
          'api-p/projectTag/handler/listExport?projectIds=' +
          vm.projectIds +
          '&access_token=' +
          localStorage.getItem('access_token')
      }
    },
    // 获取编辑标签中的标签
    getLabel() {
      this.axios({
        method: 'post',
        url: 'api-p/projectTag/handler/projectTagType',
      })
        .then((resp) => {
          this.optionalLabel = resp.data.result
        })
        .catch((resp) => {
          this.$message.error('数据获取失败')
        })
    },
    getLabelDetail(projectId) {
      this.axios({
        method: 'post',
        url: 'api-p/projectTag/handler/listByProjectId',
        data: {
          projectId: projectId,
        },
      })
        .then((resp) => {
          this.optionalLabel = resp.data.result.noHasTags
          this.diaProjectName = resp.data.result.projectName
          this.selectLabel = resp.data.result.hasTags
        })
        .catch((resp) => {
          this.$message.error('数据获取失败')
        })
    },
  },
}
</script>

<style scoped lang="less">
.topTitle {
  height: 67px;
  background-color: #e4ebf1;
  padding-left: 24px;
  font: bold 18px/67px Microsoft YaHei;
}
.mainCon {
  top: 210px;
  // padding:24px;
  /deep/.el-form-item {
    // margin-right: 30px;
    .el-input__inner {
      width: 248px;
    }
    .el-form-item__label {
      width: 85px;
    }
  }
  /deep/.projectPrice {
    .el-input__inner {
      width: 100px;
    }
  }
  /deep/.personNum {
    .el-input__inner {
      width: 100px;
    }
  }
  .commonBtn {
    // margin-left:12px;
  }
  .header {
    position: relative;
    line-height: 36px;
    box-sizing: border-box;
    padding-left: 24px;
    margin-top: 24px;
    span {
      font-size: 16px;
      color: #333333;
    }
    &Btn {
      position: absolute;
      right: 24px;
      top: 0;
      height: 36px;
    }
  }
}

.el-table /deep/.disabledCheck .cell .el-checkbox__inner {
  // display: none!important;
  // left:5px !important;
}
.el-table /deep/ .el-checkbox__inner {
  // left:20px !important;
}
// .el-table /deep/.disabledCheck .cell:before {
//     content: '全选当前页';
//     position: absolute;
//     top:1px;
//     right: 12px;
//     font-size:12px;
// }
.labelBox {
  min-height: 64px;
  width: 100%;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 8px;
  .selectSty {
    margin-right: 8px;
  }
}

.optionalLabelBox {
  ul {
    li {
      font-size: 12px;
      color: #666;
      line-height: 20px;
      margin-top: 9px;
      border: 1px solid #dcdfe6;
      margin-right: 8px;
      padding: 0px 4px;
      cursor: pointer;
      &:active {
        color: #409eff;
      }
      &:hover {
        color: #409eff;
      }
    }
  }
}

.selectColor {
  color: #409eff;
}
.explain {
  ul {
    li {
      line-height: 22px;
      color: #666;
      &:first-child {
        margin-top: 7px;
      }
    }
  }
}

.wordStyle {
  font-size: 14px;
  color: #666;
}

.selectedBox /deep/ i.icon.iconfont.icondaochu {
  font-size: 14px !important;
}

.labelTitleSty {
  float: left;
  width: 85px;
  text-align: right;
  padding-right: 12px;
  font-size: 14px;
  color: #606266;
  line-height: 36px;
}
// .searchInputWidth /deep/ .el-form-item__content {
//     width:268px !important;
// }
@media only screen and (max-width: 1366px) {
  /deep/.searchInputWidth .el-form--inline .el-form-item__label {
    width: 85px;
  }
}

@media only screen and (max-width: 1366px) {
  .commonBtn {
    margin-left: 0 !important;
  }
}
@import '../../../static/css/filterArea.less';
</style>
